import React, {Component} from 'react';
import {StyleSheet, Dimensions, Image, View} from 'react-native';
//引用插件
import Swiper from 'react-native-swiper';
const {width} = Dimensions.get('window');

const styles = StyleSheet.create({
  wrapper: {
    width: width,
    height: (width * 40) / 75,
  },
  paginationStyle: {
    bottom: 6,
  },
  dotStyle: {
    backgroundColor: '#fff',
    opacity: 0.4,
  },
  activeDotStyle: {
    backgroundColor: '#f00',
  },
  bannerImg: {
    width: width,
    height: (width * 40) / 75,
  },
});

class Home extends Component {
  static navigationOptions = {
    title: '轮播图',
  };
  render() {
    return (
      <View style={styles.wrapper}>
        <Swiper
          height={200} // 指定高度
          loop={true} // 是否开启循环
          showsButtons={true} // 设置控制按钮(左右两侧的箭头)是否可见
          index={0}
          autoplay={false} // 是否自动跳转
          horizontal={true} // 是否水平滚动
        >
          {[
            <Image
              resizeMode="cover"
              source={require('../../assets/imgs/1.jpg')}
              style={styles.bannerImg}
            />,
            <Image
              resizeMode="cover"
              source={require('../../assets/imgs/2.jpg')}
              style={styles.bannerImg}
            />,
            <Image
              resizeMode="cover"
              source={require('../../assets/imgs/3.jpg')}
              style={styles.bannerImg}
            />,
            <Image
              resizeMode="cover"
              source={require('../../assets/imgs/4.jpg')}
              style={styles.bannerImg}
            />,
          ].map(value => {
            return value;
          })}
        </Swiper>
      </View>
    );
  }
}
export default Home;
